<template>
  <div>
    <van-field-select-picker
      v-model="params[fbIdProp]"
      label="发版名称"
      placeholder="点击选择发版名称"
      :columns="fbList"
      :option="{label:'fbName',value:'pkId'}"
      :isSearch="true"
      :needUnshiftEmptyObj="needUnshiftEmptyObj"
      @confirm="onConfirmFbInfo"
      :rules="fbInfoRules"
      :disabled="readOnly"
    />
    <van-field-select-picker
      ref="channelPicker"
      v-model="params[channelIdProp]"
      label="应用系统名称"
      placeholder="点击选择应用系统名称"
      :columns="channelList"
      :option="{label:'channelName',value:'pkId'}"
      :isSearch="true"
      :needUnshiftEmptyObj="needUnshiftEmptyObj"
      @confirm="onConfirmChannelInfo"
      @input="onChannelInput"
      :rules="channelInfoRules"
      :disabled="readOnly"
    />
  </div>
</template>

<script>
import VanFieldSelectPicker from "@/components/VantTools/VanFieldSelectPicker";
import {listChannelInfo, listFbInfo} from "@/api/yjcz/fbChannelScene";

export default {
  name: "FbAndChannelSelectPicker",
  components: { VanFieldSelectPicker },
  props: {
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    fbIdProp: {
      type: String,
      default: ''
    },
    channelIdProp: {
      type: String,
      default: ''
    },
    fbInfoRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    channelInfoRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    needUnshiftEmptyObj: {
      type: Boolean,
      default: true
    }
  },
  created () {
    this.getFbInfoList()
    if (this.params[this.fbIdProp]) {
      this.getChannelInfoList(this.params[this.fbIdProp])
    }
  },
  data () {
    return {
      fbList: [],
      channelList: []
    }
  },
  methods: {
    getFbInfoList () {
      listFbInfo().then(response => {
        if (response.code === 200) {
          this.fbList = response.data
        }
      })
    },

    getChannelInfoList (fbId) {
      listChannelInfo(fbId).then(response => {
        if (response.code === 200) {
          this.channelList = response.data
          this.$refs.channelPicker.resetColumns(this.channelList)
        }
      })
    },
    onConfirmFbInfo (value) {
      if (value && value.pkId != '') {
        var fbId = value.pkId
        this.params[this.fbIdProp] = fbId
        this.getChannelInfoList(fbId)
      } else {
        this.channelList = []
        this.$refs.channelPicker.resetColumns(this.channelList)
        this.params[this.fbIdProp] = ''
      }
    },
    onConfirmChannelInfo (value) {
      let oldValue = this.params[this.channelIdProp]
      this.params[this.channelIdProp] = value.pkId
      if (value.pkId != oldValue) {
        this.$emit('channelSelChange', value.pkId)
      }
    },
    onChannelInput (value) {
      let oldValue = this.params[this.channelIdProp]
      this.params[this.channelIdProp] = value
      if (value != oldValue) {
        this.$emit('channelSelChange', value)
      }
    },
    resetSelect () {
      let oldValue = this.params[this.channelIdProp]
      this.params[this.fbIdProp] = ''
      this.params[this.channelIdProp] = ''
      if ('' != oldValue) {
        this.$emit('channelSelChange', '')
      }
      this.channelList = []
      this.$refs.channelPicker.resetColumns(this.channelList)
    }
  }
}
</script>

<style scoped>

</style>
